<template>
	<div>
		<el-row :gutter="5">
			<el-col :span="8">
				<!--shadow是显示阴影  -->
				<el-card shadow="always"> <bar-chart></bar-chart> </el-card>
			</el-col>
			<el-col :span="8">
				<el-card shadow="always"> <line-chart :reportsList="reportsList" v-if="Object.keys(reportsList).length"></line-chart> </el-card>
			</el-col>
			<el-col :span="8">
				<el-card shadow="always"><pie-chart></pie-chart> </el-card>
			</el-col>
		</el-row>
		<el-row :gutter="10" style="margin-top: 20px">
			<el-col :span="24">
				<el-card shadow="always"> 中国地图 </el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { reportsGet } from "@/http/request.js";
	import BarChart from "@/components/BarChart.vue";
	import LineChart from "@/components/LineChart.vue";
	import PieChart from "@/components/PieChart.vue";
	export default {
		name: "ReportsView",
		components: {
			BarChart,
			LineChart,
			PieChart,
		},
		data() {
			return {
				reportsList: {},
			};
		},
		created() {
			reportsGet("reports/type/1")
				.then((res) => {
					let { meta, data } = res.data;
					if (meta.status == 200) {
						this.reportsList = data;
					}else{
						this.$message.error(meta.msg)
					}
					console.log(data);
				})
				.catch((err) => {
					console.log(err);
				});
		},
		mounted() {
			// 页面尺寸一发生变化就重新resize渲染图表
			window.onresize = function () {
				window.BarChart.resize(),
					window.LineChart.resize(),
					window.PieChart.resize();
			};
		},
	};
</script>

<style>
</style>